<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>购物车页面</title>

    <link rel="stylesheet" href="__STATIC__/before/style/base.css" type="text/css">
    <link rel="stylesheet" href="__STATIC__/before/style/global.css" type="text/css">
    <link rel="stylesheet" href="__STATIC__/before/style/header.css" type="text/css">
    <link rel="stylesheet" href="__STATIC__/before/style/cart.css" type="text/css">
    <link rel="stylesheet" href="__STATIC__/before/style/footer.css" type="text/css">

    <script type="text/javascript" src="__STATIC__/before/js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="__STATIC__/before/js/cart1.js"></script>
</head>
<body>
<!-- 顶部导航 start -->
{include file="public/topnav" /}
<!-- 顶部导航 end -->

<div style="clear:both;"></div>

<!-- 页面头部 start -->
<div class="header w990 bc mt15">
    <div class="logo w990">
        <h2 class="fl"><a href="{:url('Index/index')}"><img src="__STATIC__/before/images/logo.png" alt="京西商城"></a></h2>
        <div class="flow fr">
            <ul>
                <li class="cur">1.我的购物车</li>
                <li>2.填写核对订单信息</li>
                <li>3.成功提交订单</li>
            </ul>
        </div>
    </div>
</div>
<!-- 页面头部 end -->

<div style="clear:both;"></div>

<!-- 主体部分 start -->
<div class="mycart w990 mt10 bc">
    <h2><span>我的购物车</span></h2>
    <table>
        <thead>
        <tr>
            <th class="col1">商品名称</th>
            <th class="col2">商品信息</th>
            <th class="col3">单价</th>
            <th class="col4">数量</th>
            <th class="col5">小计</th>
            <th class="col6">操作</th>
        </tr>
        </thead>
        <tbody>
        {volist id="cart" name="cart"}
        <tr>
            <input class="cartid" type="hidden" value="{$cart->id}">
            <td class="col1"><a href=""><img class="cart-img" src="__STATIC__/before/images/{$cart->img}" alt=""/></a>
                <strong><a href="" class="intro">【1111购物狂欢节】{$cart['goods']->intro}</a></strong>
            </td>
            <td class="col2"><p class="cart-color">颜色：{$cart->color}</p>
                <p class="cart-size">尺码：{$cart->size}英寸</p></td>
            <td class="col3">￥<span class="cart-price">{$cart->price}.00</span></td>
            <td class="col4">
                <a href="javascript:;" class="reduce_num"></a>
                <input type="text" name="amount" value="{$cart->num}" class="amount"/>
                <a href="javascript:;" class="add_num"></a>
            </td>
            <td class="col5">￥<span class="sum">{$cart->price*$cart->num}.00</span></td>
            <td class="col6"><a href="#"
                                onclick="warning('确定要删除吗？','{:url('User/cartDel',array('id'=>$cart->id))}')">删除</a></td>
        </tr>
        {/volist}
        </tbody>
        <tfoot>
        <tr>
            <td colspan="6">购物金额总计： <strong>￥ <span name="total" id="total">{$sum}.00</span></strong></td>
        </tr>
        </tfoot>
    </table>
    <div class="cart_btn w990 bc mt10">
        <a href="" class="continue" >继续购物</a>
        <a href="{:url('User/checkOrder')}" class="checkout">结 算</a>

    </div>
</div>
<!-- 主体部分 end -->

<div style="clear:both;"></div>
<!-- 底部版权 start -->
<div class="footer w1210 bc mt15">
    {include file="public/footer" /}
</div>
<!-- 底部版权 end -->

<script>
    function warning(info, url) {
        if (window.confirm(info)) {
            window.location.href = url;
        }
    }
</script>
<script>
    var amount = document.getElementsByClassName("amount"), //数量
        cartid = document.getElementsByClassName("cartid"), //
        checkout = document.querySelector('a.checkout');
    // console.log(intro);
    // console.log(amount[0].value);
    var len = amount.length;
    // console.log(len);
    var arrAmount = [];
    var arrId = [];
    checkout.onclick = function () {
        for (var i = 0; i < len; i++) {


            arrAmount[i] = amount[i].value;
            arrId[i] = cartid[i].value;


            $.ajax({
                type: "POST",
                url: "{:url('User/updateCart')}",
                dataType: "json",
                data: {
                    "amount": arrAmount,
                    "id": arrId
                },

            });
        }
    };

</script>
</body>
</html>
